<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>选座</title>


<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>-->
    <script src="./js/vue2.6.12.js"></script>
    <script src="./js/axios.js"></script>
    <script src="./js/areas.js"></script>
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script> -->
    <!-- <script type="text/javascript" src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script> -->
    <script type="text/javascript" src="./js/qs.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>

    <link rel="stylesheet" href="./css/common.d1d257d3.css">
    <link rel="stylesheet" href="./css/cinemas-seat.b8adee6e.css">

</head>
<body>

<div id="app">
    <div class="header">
        <div class="header-inner">
            <a href="index.html" class="logo" ></a>
            <div class="city-container" >
                <div class="city-selected">
                    <div class="city-name">
                        &nbsp;
                        <!--                        <span class="caret"></span>-->
                    </div>
                </div>
                <div class="city-list" >
                    <div class="city-list-header">定位城市：<a class="js-geo-city">上海</a></div>
                </div>
            </div>

            <div class="nav">
                <ul class="navbar">
                    <li><a href="index.html" >首页</a></li>
                    <li><a href="movie.html" >电影</a></li>
                    <li><a href="cinema.html" >影院</a></li>
                    <li><a href="dashboard.html">榜单</a></li>
                </ul>
            </div>



            <div class="user-info" v-if="islogin">
                <div class="user-avatar has-login">
                    <img src="./images/63957f10ae9679c95d4ba26ad1bd29c816882.png">
                    <span class="caret"></span>
                    <ul class="user-menu yes-login-menu">
                        <li class="text"><a href="./orderlist.html">我的订单</a></li>
                        <li class="text login-name"><a href="javascript:void(0)" >基本信息</a></li>
                        <li class="text"><a href="javascript:void(0)" class="J-logout" @click="logout">退出登录</a></li>
                    </ul>
                </div>
            </div>
            <div class="user-info" v-if="!islogin">
                <div class="user-avatar J-login">
                    <img src="./images/7dd82a16316ab32c8359debdb04396ef2897.png">
                    <span class="caret"></span>
                    <ul class="user-menu no-login-menu">
                        <li><a href="javascript:void(0)" @click="login">登录</a></li>
                    </ul>
                </div>
            </div>

            <form target="_blank" class="search-form" >
                <input name="kw" class="search" type="search" v-model="searchKey" maxlength="32" placeholder="找影视剧、影人、影院"
                       autocomplete="off">
                <input class="submit" type="button"  @click="doSearch"/>
            </form>


        </div>
    </div>
    <div class="header-placeholder"></div>


    <div class="container">
        <div class="order-progress-bar">
            <div class="step first done">
                <span class="step-num">1</span>
                <div class="bar"></div>
                <span class="step-text">选择影片场次</span>
            </div>
            <div class="step done">
                <span class="step-num">2</span>
                <div class="bar"></div>
                <span class="step-text">选择座位</span>
            </div>
            <div class="step ">
                <span class="step-num">3</span>
                <div class="bar"></div>
                <span class="step-text">5分钟内付款</span>
            </div>
            <div class="step last ">
                <span class="step-num">4</span>
                <div class="bar"></div>
                <span class="step-text">影院取票观影</span>
            </div>
        </div>


        <div class="main clearfix">
            <div class="hall">
                <div class="seat-example">
                    <div class="selectable-example example">
                        <span>可选座位</span>
                    </div>
                    <div class="sold-example example">
                        <span>已售座位</span>
                    </div>
                    <div class="selected-example example">
                        <span>已选座位</span>
                    </div>

                </div>


                <div class="seats-block">
                    <div class="row-id-container">
                        <span class="row-id" v-for="rw of hallY" :key="rw">{{rw}}</span>
                    </div>

                    <div class="seats-container">
                        <div class="screen-container" style="left: 85px;">
                            <div class="screen">银幕中央</div>
                            <div class="c-screen-line"></div>
                        </div>

                        <div class="seats-wrapper">

                            <div class="row" v-for="rw of hallYList" :key="rw" style="cursor: pointer">
                                <!--            <span :class="index%2==0?selectableCls:index%3==0?selectedCls:soldCls" v-for="index of hallX" :key="index"></span>-->
                                <span :class="seatClsMap.get('_'+seat.seatX+rw)"
                                      v-for="seat of seatList" :key="seat.seatId" v-if="seat.seatY==rw"
                                      @click="chooseSeat($event,seat,rw,seat.seatX)"></span>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

            <div class="side">
                <div class="movie-info clearfix">
                    <div class="poster">
                        <img :src="movieImagePath+movie.movieImg">
                    </div>
                    <div class="content">
                        <p class="name text-ellipsis">{{movie.movieName}}</p>
                        <div class="info-item">
                            <span>类型 :</span>
                            <span class="value">{{movie.movieTypeStr}}</span>
                        </div>
                        <div class="info-item">
                            <span>时长 :</span>
                            <span class="value">{{movie.movieTime}}分钟</span>
                        </div>
                    </div>
                </div>

                <div class="show-info">
                    <div class="info-item">
                        <span>影院 :</span>
                        <span class="value text-ellipsis">{{cinema.cinemaName}}</span>
                    </div>
                    <div class="info-item">
                        <span>影厅 :</span>
                        <span class="value text-ellipsis">{{hall.hallName}}</span>
                    </div>
                    <div class="info-item">
                        <span>版本 :</span>
                        <span class="value text-ellipsis">{{movie.movieVersion}}</span>
                    </div>
                    <div class="info-item">
                        <span>场次 :</span>
                        <span class="value text-ellipsis screen">{{hallMovie.startTime}}</span>
                    </div>
                    <div class="info-item">
                        <span>票价 :</span>
                        <span class="value text-ellipsis">￥{{hallMovie.fareMoney}}/张</span>
                    </div>
                </div>

                <div class="ticket-info">
                    <div class="no-ticket" style="display: none;">
                        <p class="buy-limit">座位：一次最多选4个座位</p>
                        <p class="no-selected">请<span>点击左侧</span>座位图选择座位</p>
                    </div>
                    <div class="has-ticket" style="display: block;">
                        <span class="text">座位：</span>
                        <div class="ticket-container">
                            <span class="ticket" v-for="seatLabel in selectSeatLabelList"
                                  :key="seatLabel">{{seatLabel}}</span>
                        </div>
                    </div>

                    <div class="total-price">
                        <span>总价 :</span>
                        <span class="price">{{totalPay}}</span>
                    </div>
                </div>

                <div class="confirm-order">
                    <div class="cellphone">
                        <span>手机号 :</span>
                        <span class="phone-num">{{cellphone}}</span>
                    </div>
                    <div class="confirm-btn" @click="confirmSelectedSeat">确认选座</div>

                </div>
            </div>
        </div>

    </div>
</div>
<div class="footer" style="visibility: visible;">
</div>


</body>
<script>
    let vm = new Vue({
        el: "#app",//绑定，告知vue负责管理页面的哪个部分
        data: {
            islogin:false,//是否已经登录
            movieImagePath: './images/movie/',//电影图片的路径前缀
            selectedHallId: 0,//影厅id
            cinemaId:0,//电影院id
            hallMovieId: 0,//排片hall movie id
            hallYList:[],
            hallY: 0,//排数
            hallX: 0, //每一排的座位数
            selectableCls: "seat selectable",
            selectedCls: "seat selected",
            soldCls: "seat sold",
            seatList: [],//座位占用情况
            selectedSeatIdList: [],//被选中的座位id列表
            seatClsMap: new Map(),//每个座位的样式
            selectSeatLabelList: [],//选中的座位label,显示在右侧选中的标签上
            orderId: '',
            totalPay: 0,//应付款
            movieId: -1,//电影的Id
            movieInfo: {},//电影信息
            hallMovie: {},//排片信息
            cinema:{},//电影院对象
            movie:{},//电影对象
            hall:{},//影厅
            cellphone: '139****1122',
            searchKey:'',
        },
        methods: {
            //搜索
            /**
             * url:search.html
             * method:get
             * param: searchKey
             * url使用encodeURI编码,例如：encodeURI("search.html?searchKey=万达")
             */
            doSearch() {
                location.href=encodeURI("search.html?searchKey="+this.searchKey)
            },
            //刷新总价：
            refreshTotalPay(pay) {

                this.totalPay+=pay
            },
            //根据电影院id查询电影院信息
            queryCinemaByCinemaId(){
                axios.get('cinema/cinema/cinema/'+this.cinemaId)
                .then(res=>{
                    this.cinema=res.data
                })
            },
            //根据电影id查询电影对象
            queryMovieByMovieId(){
                axios.get('cinema/cinema/movie/queryMovieVo/'+this.movieId)
                .then(res=>{
                    this.movie=res.data

                    console.log('res.data',res.data)
                })

            },

            //根据排片计划的id（hallMovieId）查询一条排片计划信息
            /**
             * url: cinema/cinema/hallmovie/{hallMovieId}
             * method: get
             * param: hallMovieId （this.hallMovieId） 排片计划表主键
             * return: 一个排片计划对象赋值this.hallMovie = res.data
             *
             */
            queryHallMovieById() {
                axios.get('cinema/cinema/hallmovie/'+this.hallMovieId)
                .then(res=>{
                    this.hallMovie = res.data
                })
            },
            //根据电影id（movieId）获取电影信息MovieVo
            //   (一个复合对象包括：演员列表：actors，
            //                  演员和电影关联列表movieActors，
            //                  电影类型列表movieTypes，
            //                  上映地区对象firstReleaseArea，
            //                  多个电影类型拼接的字符串 movieTypeStr，
            //                  电影首映地区名称firstReleaseAreaStr)

            /**
             * url:cinema/cinema/movie/selectMovieVoByMovieId
             * method: get
             * param： movieId 电影id
             * return: 返回的复合电影对象，赋值给this.movieInfo
             */
            loadMovie() {

            },
            //选择一个座位
            //1. seatObj：要选择的座位对象；seatY：第几排；seatX：第几个座位
            //2. 如果，座位的状态等于0或者等于2，不能选择此座位，直接return
            //3. 否则如果，被选择的座位的id组成的列表中包含了【使用this.selectedSeatIdList.includes】当前传入的座位对象中的seatId，
            //      --那么说明现在是要取消选择，所以需要在已选中的座位列表中删除当前用户选择的id：this.selectedSeatIdList.splice(this.selectedSeatIdList.findIndex(item => item == seatObj.seatId), 1)
            //      --设置当前被点击的这个座位的key对应的css为不选中：this.seatClsMap.set('_' + seatX + seatY, 'seat selectable')
            //      --通过下标for循环座位标签列表：this.selectSeatLabelList,例如：for (let index in this.selectSeatLabelList)
             //     --判断是否当前的循环对象的座位标签等于用户传入的if (this.selectSeatLabelList[index] == (seatY + "排" + seatX + "座"))
             //          --如果上一步结果是：等于，那么从this.selectSeatLabelList删除这个元素this.selectSeatLabelList.splice(index, 1)，使用break停止循环
            //           --调用 this.refreshTotalPay(-1)。传入-1代表要减少付款总额，如果传1，代表需要增加付款额
            //           --调用this.$forceUpdate();强制刷新页面
            // 4.否则这个座位没有被占用，可以卖票
            //    --把被选中的座位id放入this.selectedSeatIdList.push(seatObj.seatId)
            //    --把当前选中这个座位的css设置成为选中this.seatClsMap.set('_' + seatX + seatY, 'seat selected')
            //    --把选中的这个座位的label放入列表this.selectSeatLabelList.push(seatY + "排" + seatX + "座")
            //    --调用this.refreshTotalPay(票价)刷新付款总金额
            //    --调用this.$forceUpdate();强制刷新页面
            //
            chooseSeat(event, seatObj, seatY, seatX) {
                if(seatObj.seatStatus==0 || seatObj.seatStatus==2){
                    return ;
                }
                if(this.selectedSeatIdList.includes(seatObj.seatId)){
                    let idx = this.selectedSeatIdList.findIndex(item => item == seatObj.seatId);
                    this.selectedSeatIdList.splice(idx, 1);
                    this.seatClsMap.set('_' + seatX + seatY, 'seat selectable');
                    //把座位标签列表中这个座位的标签删除
                    this.selectSeatLabelList.splice(idx, 1)
                    this.refreshTotalPay(-this.hallMovie.fareMoney)
                }else{
                    this.selectedSeatIdList.push(seatObj.seatId)
                    this.seatClsMap.set('_' + seatX + seatY, 'seat selected');
                    //把座位标签列表中这个座位的标签删除
                    this.selectSeatLabelList.push(seatObj.seatName)
                    this.refreshTotalPay(this.hallMovie.fareMoney)
                }

            },
            //查询每个影厅的座位x y生成选择座位图
            /**
             * url: cinema/cinema/hall/
             * param: 路径参数需要拼在路径中：this.selectedHallId ：例如 cinema/cinema/hall/122
             * return
             *   在响应函数中
             *     --影厅信息赋值 this.hall = res.data
             *     --影厅有多少排赋值：this.hallY = res.data.hallY
             *     --每一排有多少座位数赋值：this.hallX = res.data.hallX
             */
            //根据hallId影厅
            queryHallByHallId(){
                axios.get('cinema/cinema/hall/'+this.selectedHallId)
                    .then(res=>{
                        this.hall=res.data
                        this.hallY=res.data.hallY
                        this.hallX = res.data.hallX
                        for(let i=0;i<this.hallY;i++){
                            this.hallYList.push(i);

                        }

                    })
            },
            //根据hallMovieId查询座位占用情况
            /**
             * url:  cinema/cinema/seat/list
             * method: get
             * param: pageNum=1
             * param: pageSize=1000
             * param: hallMovieId 排片计划表主键：this.hallMovieId
             * return:
             *   在响应函数中
             *     1. 把返回的座位列表赋值：this.seatList = res.rows
             *     2. for循环this.seatList
             *       2.1 如果座位的状态等于2，那么说明座位已经销售把 '_'+seatX+seatY 三个拼在一起作为map的key，
             *           "seat sold" 为值放入this.seatClsMap中：例如 ：'_' + item.seatX + item.seatY ，this.seatClsMap.set(key, "seat sold")
             *       2.2 如果座位的状态等于1，那么说明还未销售，'_'+seatX+seatY 三个拼在一起作为map的key，
             *           "seat selectable" 为值放入this.seatClsMap中：let key = '_' + item.seatX + item.seatY ，this.seatClsMap.set(key, "seat selectable")
             *       2.3 如果不等于1，也不等于2那么说明座位暂时不可用，把 '_'+seatX+seatY 三个拼在一起作为map的key，
             *           "seat empty"为值放入this.seatClsMap中：例如 ：let key = '_' + item.seatX + item.seatY，this.seatClsMap.set(key, "seat empty")
             *
             */
            querySeatListByHallMovieId() {

                axios.get('cinema/cinema/seat/list',{
                    params:{
                        pageNum:1,
                        pageSize:1000,
                        hallMovieId:this.hallMovieId
                    }
                })
                .then(res=>{
                    this.seatList=res.rows
                    for(let seat of this.seatList){
                       if(seat.seatStatus==1){
                           this.seatClsMap.set('_' + seat.seatX + seat.seatY,'seat selectable');
                       }else if(seat.seatStatus==2){
                           this.seatClsMap.set('_' + seat.seatX + seat.seatY,'seat sold');
                       }else{
                           this.seatClsMap.set('_' + seat.seatX + seat.seatY,'seat empty');
                       }
                    }
                    console.log("seatlist:",this.seatList)
                })
            },
            //查询一个订单号,付款的时候传给付款页面，一起发送给服务端，生成订单时候，这个就是主键
            //需要搭建一个订单微服务，获取一个orderId作为主键
            /**
             * url:order/order/query/orderId
             * method: get
             *
             * return:返回值赋给this.orderId
             */
            queryOrderSn() {
                axios.get('order/order/query/orderId')
                .then(res=>{
                    this.orderId=res;
                    console.log('res.orderId===',res)
                    console.log(typeof(this.orderId))
                    console.log('this.orderId===',res)
                })
            },
            //确认选座，生成订单
            /**
             * url:order/order/makeOrder
             * method: post
             * param: selectedSeatIdList-->this.selectedSeatIdList 被选择的座位id列表
             * param: hallMovieId-->this.hallMovieId 选择的放映计划id
             * param: orderId-->this.orderId 订单id
             * return：
             *   响应函数中
             *     --定义一个变量seatLabel，用来存储被选择的座位的标签：1排2座，3排2座
             *     --循环被选中的座位的标签，把所有被选中的座位标签拼接在一起，用空格分开，赋值给seatLabel
             *     --跳转到付款页面，带上需要的参数（这些参数的值主要为了在付款页面显示）：location.href = encodeURI('pay.html?orderId=' + this.orderId + "&totalPay=" + this.totalPay + "&movieName=" + this.movieInfo.movieName + "&cinemaName=" + this.hallMovie.cinemaName + "&hallName=" + this.hallMovie.hallName + "&startTime=" + this.hallMovie.startTime + "&seatLabel=" + seatLabel)
             *          --orderId 订单id
             *          --totalPay 总计付款金额
             *          --movieName 电影名称
             *          --cinemaName 电影院名称
             *          --htName 影厅名称
             *          --startTime 电影开始放映时间
             *          --seatLabel 被选中的座位标签拼接的字符串
             */
            confirmSelectedSeat: function () {
                //1.判断是否登录
                //2. 判断 this.selectedSeatIdList.length是否等于0,如果等于0，提示“请选择座位”，return
                //3. 发送请求下订单，具体参数见方法上面的说明
                axios.post('order/order/makeOrder',{
                    orderId:this.orderId,
                    hallMovieId:this.hallMovieId,
                    cinemaId:this.cinemaId,
                    movieId:this.movieId,
                    seatIdList:this.selectedSeatIdList

                })
                .then(res=>{
                    if(res.code==200){

                        location.href='pay.html?orderId='+this.orderId+"&totalPay="+this.totalPay
                            +"&movieName="+this.movie.movieName+"&cinemaName="+this.cinema.cinemaName
                            +"&hallName="+this.hall.hallName+"&seatLabel="+this.selectSeatLabelList.join(" ")+"&startTime="+this.hallMovie.startTime
                    }else{
                        alert('下订单失败')
                    }
                })

            },
            logout(){
                // alert('暂时未实现')
                //删除token
                removeToken()
                alert('登出成功')
                // //跳转回主页
                location.href='index.html'
            },
            login(){
                location.href='login.html'
            },
            checkIsLogin(){
                let adminToken=getToken()
                // alert(adminToken)
                if(adminToken){
                    this.islogin=true
                }else{
                    this.islogin=false
                }
            }
        },

        /**
         * 获取页面传过来的movieId：this.movieId = GetQueryString("movieId")

         * 从其他页面在url中传递的参数中获取hallId 和 hallMovieId：this.selectedHallId = GetQueryString("hallId")，this.hallMovieId = GetQueryString("hallMovieId")
         * 根据影厅id查询影厅：this.queryHallByHallId()
         * 根据排片的电影id，查询座位id列表：this.querySeatListByHallMovieId()
         * 从order-service中提前获取一个订单号：可以防止重复下订单：this.queryOrderSn()
         * 获取当前movieId对用的电影：this.loadMovie()
         * 根据HallMovieId查询影厅播放计划表this.queryHallMovieById()
         * 从localStorage获取手机号码，这个是在登陆成功时候保存到localStorage：this.cellphone = localStorage.getItem("user_cellphone")
         */
        created() {
            this.cellphone = localStorage.getItem("user_cellphone")
            this.movieId = GetQueryString("movieId")
            this.selectedHallId = GetQueryString("hallId")
            this.hallMovieId = GetQueryString("hallMovieId")
            this.cinemaId = GetQueryString("cinemaId")
            this.queryMovieByMovieId();
            this.queryHallByHallId();
            this.queryCinemaByCinemaId();
            this.queryHallMovieById();
            this.querySeatListByHallMovieId();
            this.queryOrderSn();
            this.checkIsLogin();

        }
    })
</script>
</html>
